import { Input, View, Text, InputProps } from "@tarojs/components";
import "./index.less";
import { TValue } from "@/types";

type Props = {
  value: TValue;
  onValueChange?: (e: any) => void;
  icon?: React.ReactNode;
  unit?: string;
} & InputProps;

const OutlineInput = (props: Props) => {
  const { value, onValueChange, icon, unit, ...rest } = props;
  return (
    <View className="outline-input">
      {icon}
      <Input
        className="input"
        value={String(value)}
        onInput={onValueChange}
        {...rest}
      />
      {unit && <Text className="input-unit">{unit}</Text>}
    </View>
  );
};

export default OutlineInput;
